<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex3 页面布局</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="container">
    <!--页头-->
    <div id="header">
        <h1 >neko's coffee house</h1>
    </div>
     <!--页面主体（此处左右结构）-->
     <div id="main">
        <!--左边导航信息-->
        <div class="sidebar">
            <ul>
               <li><a href="#">menu1</a></li>
               <li><a href="#">menu2</a></li>
               <li><a href="#">menu3</a></li>
               <li><a href="#">menu4</a></li>
               <li><a href="#">menu5</a></li>
            </ul>
        </div>
        <!--右边内容-->
        <div class="mainbar">
            <p>coming soon</p>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
                <li>item5</li>
                <li>item6</li>
                <li>item7</li>
                <li>item8</li>
                <li>item9</li>
                <li>item10</li>
            </ul>
            <img src="images/coffee.jpeg" alt="">
            <p>Road 23 .....</p>
        </div>
     </div>
     <!--页底-->
     <div id="footer">
        <p>copyright&copy;<a href="mailto:labubu@hznu.com">labubu</a></p>
     </div>
    </div>
</body>
</html>